<template>
	<view class="HomePageToolPage padding_18rpx ">
		<sunui-navbar :items="tabList" v-if="tabList.length>=1"  lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex"
			padding="0rpx" activeColor="rgb(0, 124, 255)" :size="112" activeLineBg="rgb(0, 124, 255)"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="4rpx"
			bgColor="transparent" :margin="30" @change="e=>getChanges(e,tabList)"></sunui-navbar>
		
		<view class="flex-wrap-justifyBetween">
			<view class="toolManagement " v-for="(item,index) in toolManagementArr">
				<view class="flex-start-center">
					<image class="img" :src="item.icon" mode=""></image>
					<view class="margin-left_16rpx font-weight_bold">
						{{item.name}}
					</view>

				</view>
				<view class="flex-between margin-top_10rpx" style="width: 100%;">
					<view class="flex-start-center" style="color: rgb(102, 102, 102);" @click="editTool(item)">
						<uni-icons type="compose" size="17"></uni-icons>
						编辑
					</view>
					<switch :checked="item.status==0?false:true" style="transform:scale(0.7)"
						@change="e=>switch1Change(e,item)" />
				</view>
			</view>


		</view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabList: [],
				currentIndex:0,
				tabIndex: 4,
				template_id:1,
				token: uni.getStorageSync('login').token,
				toolManagementArr: [{
						image: '../../static/会员卡管理端/组合 308.png',
						text: '充值中心'
					},
					{
						image: '../../static/会员卡管理端/组合 309.png',
						text: '分销中心'
					},
					{
						image: '../../static/会员卡管理端/组合 310.png',
						text: '优惠券'
					},
					{
						image: '../../static/会员卡管理端/组合 311.png',
						text: '个人信息'
					},
					{
						image: '../../static/会员卡管理端/组合 317.png',
						text: '收支记录'
					},
					{
						image: '../../static/会员卡管理端/组合 318.png',
						text: '充值记录'
					}, {
						image: '../../static/会员卡管理端/组合 319.png',
						text: '我的套餐'
					},
					{
						image: '../../static/会员卡管理端/组合 312.png',
						text: '推广该报'
					},
					{
						image: '../../static/会员卡管理端/组合 316.png',
						text: '提现记录'
					},
					{
						image: '../../static/会员卡管理端/组合 315.png',
						text: '我的团队'
					},
					{
						image: '../../static/会员卡管理端/组合 314.png',
						text: '在线客服'
					},
					{
						image: '../../static/会员卡管理端/组合 313.png',
						text: '帮助中心'
					},
				]
			}
		},
		onLoad() {
			this.init()
			this.templateListFn()
			
		},
		onShow() {
			console.log('你好啊')
			this.init()
			
		},
		methods: {
			async templateListFn(){
				const res = await this.$http.post({
					url: this.$api.templateList,
					data: {
						page: 1,
						limit: 10,
				
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
				
				})
				if (res.code == 0) {
					
					this.tabList=res.data.map((item)=>{
						return{
							name:item.name,
							id:item.id
						}
					})
				
				} else {
					this.$sun.toast(res.msg, 'none')
				}
			},
			getChanges(e,item){
				
				console.log(e,item)
				this.template_id=item[e].id
				console.log(this.template_id)
				this.currentIndex=e
				this.init()
			},
			async switch1Change(e, item) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)


				const result = await this.$http.post({
					url: this.$api.upModuleStatus,
					data: {
						id: item.id,
						status: item.status == 0 ? 1 : 0,
						
						

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.init()
					this.$sun.toast(result.msg, 'none')
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			async init() {

				const result = await this.$http.post({
					url: this.$api.moduleList,
					data: {
						type: 1,
						template_id:this.template_id

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.toolManagementArr = result.data.list
				} else {
					this.$sun.toast(result.msg, 'none')
				}
				
				
				
				
				
			},
			editTool(item){
				this.$sun.navGo('/pages/HomePageTool/HomePageToolEdit/HomePageToolEdit',{...item})
			}


		}
	}
</script>

<style lang="less" scoped>
	.HomePageToolPage {
		.toolManagement {
			width: 176px;
			margin-top: 20rpx;
			background: rgb(245, 248, 255);
			padding: 20rpx;
			border-radius: 54px;

			.img {
				border-radius: 50%;
				width: 64rpx;
				height: 64rpx;
			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>